<%-- 
    Document   : pruebamcharts
    Created on : 02-jun-2014, 15:30:36
    Author     : Jorge Aguilar
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>       

    </head>
    <body>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
                                            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
                                           <script>
                                           $(function() {
                                               $( "#tabs" ).tabs();
                                             });
                                             $(function(){
                                            // Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
                                            $("#agregar").on('click', function(){
                                             $("#tabla tbody tr:eq()").clone().append('<td class="eliminar"><input class="a" type="button" value="-"/></td>').appendTo("#tabla");

                                            });
                                             // Evento que selecciona la fila y la elimina
                                            $(document).on("click",".eliminar",function(){
                                             var parent = $(this).parent();
                                             $(parent).remove();
                                            });
                                           });
                                            </script>       
                                            <div class="row">
                                                <table borde="1" id="tabla">
                                                    <!-- Cabecera de la tabla -->
                                                    <thead>
                                                     <tr>
                                                      <th>Valor</th>
                                                      <th>Nombre</th>
                                                      <th></th>
                                                      <th>&nbsp;</th>
                                                     </tr>
                                                    </thead>

                                                   <!-- Cuerpo de la tabla con los campos -->
                                                    <tbody>
                                                    <!-- fila base para clonar y agregar al final -->
                                                     <tr id="fila-base">
                                                      <td><input  id="valor" name="valor[]" type="text"/></td>
                                                      <td><select id="nombre" name="nombre[]">
                                                        <option value="" disabled="disabled" selected="selected">Seleccione...</option>
                                                        <option value="FR">FR</option>
                                                        <option value="FR">FC</option>
                                                                                          <option value="PA">PA</option>
                                                                                          <option value="Glisemia">Glisemia</option>
                                                                              </select>
                                                      </td>
                                                     </tr>
                                                   <!-- fin de código: fila base -->
                                                     </tbody>
                                                   </table>
                                                   <!-- Botón para agregar filas -->
                                                   <input type="button"  class="a" id="agregar" value="+" />
                                            </div>
    </body>
</html>
